<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>购票系统</el-breadcrumb-item>
      <el-breadcrumb-item>热映电影</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="box">
      <div class="tu">
        <h2 style="font-size:30px;color:rgb(255, 0, 64)">HOT Movie <span class="el-icon-s-platform"></span></h2>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="(item,i) in list.slice(0,5)" :key="i">
            <div class="mydiv">
              <img :src="item.poster" />
            </div>
          </el-carousel-item>
        </el-carousel>
        <h2 style="text-align:center;font-size:30px;color:rgb(0, 255, 242)">您的选择是我们最大的幸运<span class="el-icon-s-opportunity"></span></h2>
      </div>
      <div class="lb">
        <el-row>
          <el-col v-for="(item,i) in list" :key="i" class="tiao">
            <el-button type="warning" icon="el-icon-video-camera" circle></el-button>
            <img :src="item.poster" alt="">
            <h2>{{item.name}}</h2>
            <p>领衔主演</p>
            <span class="span1"><el-tag v-for="(keys,j) in item.actors" type="warning" :key="j">{{keys.name}}</el-tag></span>
            <el-button @click="gou(item.filmId)" class="but1">详细内容</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getfilmlist } from "@/api";
export default {
  data(){
    return{
      list:[],
    }
  },
  methods:{
    gou(data){
      console.log(data);
      this.$router.push({name:"buyxiang",params:{filmId:data}})//跳转到评论页，并将电影id传过去！！！
    }
  },
  mounted() {
    getfilmlist().then((res) => {
      console.log(res.result.data);
      this.list = res.result.data.films
    });
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 0px;
}
::v-deep .el-breadcrumb__inner {
  color: rgb(240, 124, 124) !important;
}
.el-breadcrumb {
  font-size: 30px;
}
.box1 {
  height: 450px;
}
.box {
  width: 100%;
  height: 560px;
  background-color: rgba(253, 251, 251, 0.3);
  display: flex;
  flex-wrap: wrap;
  .tu {
    width: 40%;
    height: 100%;
    
  }
  .lb {
    overflow: auto;
    width: 60%;
    height: 100%;
    background: url(../../assets/images/timg11.jpg);
    background-size: 100% 100%;
  }
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .el-carousel{
    height: 450px;

  }
 ::v-deep .el-carousel__container{
    height: 400px !important;
    overflow: visible !important;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .tiao{
    width: 95%;
    height: 120px;
    margin:10px 0 0 20px;
    padding: 10px;
    border: 2px solid palegreen;
    border-radius: 15px;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    position: relative;
    img{
      width: 80px;
      margin: 0 40px;
    }
    h2{
      width: 120px;
      font-size: 30px;
      font-weight: 800;
      color: rosybrown;
    }
    .but1{
      position: absolute;
      top: 35%;
      right: 20px;
    }
    p{
      font-size: 20px;
      font-weight: 600;
      width: 20px;
      color:red;
      margin-left: 10px;
    }
    .span1{
      display: flex;
      width: 300px;
      flex-wrap: wrap;
      margin-left: 20px;
    span{
      display: inline-block;
    }
    }
  }
</style>